<template>
	<view class="home">
		<scroll-view scroll-x class="navscroll">
			<view class="item" :class="index===navIndex ? 'active' : ''" v-for="(item,index) in navArr" :key="item.id"
				@click="clickNav(index,item.id)">
				{{item.classname}}
			</view>
		</scroll-view>
		<view class="content">
			<view class="row" v-for="item in newsArr" :key="item.id">
				<!-- uniapp内置封装了引入 -->
				<newsbox :item="item"></newsbox>
			</view>
		</view>
		<view class="nodata" v-if='!newsArr.length'>
			<image src="../../static/images/nodata.png" mode="widthFix"></image>
		</view>
		<view class="loading" v-else>
			<view v-if="loading===1">
				数据加载中...
			</view>
			<view v-if="loading===2">
				没有更多了~
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navIndex: 0,
				navArr: [],
				newsArr: [],
				currentPage: 1,
				loading: 0 //0默认 1加载中 2没有更多了
			}
		},
		onLoad() {
			this.getNavData();
			this.getNewsData();
		},
		onReachBottom() {
			if (this.loading === 2) {
				return;
			};
			this.currentPage++;
			this.loading = 1;
			this.getNewsData();
		},
		methods: {
			clickNav(index, id) {
				this.navIndex = index,
					// 初始化
					this.currentPage = 1;
				this.newsArr = [];
				this.loading = 0;
				this.getNewsData(id);
			},
			// 获取导航栏列表数据
			getNavData() {
				uni.request({
					url: 'https://ku.qingnian8.com/dataApi/news/navlist.php',
					success: res => {
						this.navArr = res.data;
					}
				})
			},
			// 获取新闻内容列表数据
			getNewsData(id = 50) {
				uni.request({
					url: 'https://ku.qingnian8.com/dataApi/news/newslist.php',
					data: {
						// num:5,
						cid: id,
						page: this.currentPage
					},
					success: res => {
						if (res.data.length === 0) {
							this.loading = 2
						}
						// 新旧数据拼接  而不是覆盖
						this.newsArr = [...this.newsArr, ...res.data];
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navscroll {
		height: 100rpx;
		background-color: #f7f8fa;
		white-space: nowrap;

		// uniapp取消横向滚动条  因为scroll-view是uniapp内置组件  所以需要样式穿透
		/deep/ ::-webkit-scrollbar {
			display: none !important;
			width: 0 !important;
			height: 0 !important;
			-webkit-appearance: none;
			background: transparent;
		}

		position: fixed;
		left: 0;
		// top: 0;
		top: var(--window-top);
		z-index: 10;

		.item {
			font-size: 40rpx;
			display: inline-block;
			line-height: 100rpx;
			padding: 0 30rpx;
			color: #333;

			&.active {
				color: #31c27c;
			}
		}

		// .item .active {
		// 	color: #31c27c;
		// }
	}

	.content {
		padding: 30rpx;
		padding-top: 130rpx;

		.row {
			border-bottom: 1px dotted #efefef;
			padding: 20rpx 0;
		}
	}

	.nodata {
		display: flex;
		justify-content: center;
	}

	.loading {
		text-align: center;
		font-size: 26rpx;
		color: #888;
		line-height: 2em;
	}
</style>
